<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-28 10:38:19
 *@描述:高倍率病例结余情况
!-->
<template>
	<div class="page-tile-22">
		<div
			class="page-tile-22-bottom"
			ref="pageTitle22EchartsRefs"
		></div>
		<div class="page-tile-22-top">
			<formList
				topHeightValue="10%"
				bottomHeightValue="90%"
				:formParameter="formParameter"
				:data_list="data_list"
			/>
		</div>
		<div class="num-data-box">
			<div class="num-data">
				<div
					v-if="card1.text1_1 != null"
					class="tong-num-data"
				>
					<div class="num-data-bottom">同期总结余金额(万元)</div>
					<div
						class="num-data-top"
						:style="{ color: card1.text1_1 < 0 ? '#ff0000' : '#000' }"
					>
						{{ card1.text1_1 }}
					</div>
				</div>
				<div class="ben-num-data">
					<div class="num-data-bottom">本期总结余金额(万元)</div>
					<div
						class="num-data-top"
						:style="{ color: card1.text1 < 0 ? '#ff0000' : '#000' }"
					>
						{{ card1.text1 }}
					</div>
				</div>
			</div>
			<div class="num-data">
				<div
					v-if="card1.text4_4 != null"
					class="tong-num-data"
				>
					<div class="num-data-bottom">同期病例数(例)</div>
					<div class="num-data-top">
						{{ card1.text2_2 }}
						<span style="font-size: 1.2rem">占{{ card1.text4_4 }}%</span>
					</div>
				</div>
				<div class="ben-num-data">
					<div class="num-data-bottom">本期病例数(例)</div>
					<div class="num-data-top">
						{{ card1.text2 }}
						<span style="font-size: 1.2rem">占{{ card1.text4 }}%</span>
					</div>
				</div>
			</div>
			<div class="num-data">
				<div
					v-if="card1.text3_3 != null"
					class="tong-num-data"
				>
					<div class="num-data-bottom">同期例均结余(元)</div>
					<div
						class="num-data-top"
						:style="{ color: card1.text3_3 < 0 ? '#ff0000' : '#000' }"
					>
						{{ card1.text3_3 }}
					</div>
				</div>
				<div class="ben-num-data">
					<div class="num-data-bottom">本期例均结余(元)</div>
					<div
						class="num-data-top"
						:style="{ color: card1.text3 < 0 ? '#ff0000' : '#000' }"
					>
						{{ card1.text3 }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import formList from '../components/formList/formList'

export default {
	// 组件名称
	name: 'pageTile22',
	// 组件参数 接收来自父组件的数据
	props: {},
	// 局部注册的组件
	components: {
		formList
	},
	// 组件状态值
	data () {
		return {
			card1: {},
			data_list: [],
			formParameter: [{ width: '8%', title: "月份" }, { width: '5%', title: "病例数" }, { width: '12%', title: "总结余(万元)" }, { width: '10%', title: "例均结余" }, { width: '10%', title: "次均费用" }, { width: '13%', title: "平均点值" }, { width: '10%', title: "CMI" }, { width: '10%', title: "平均住院天数" }, { width: '15%', title: "每权重费用" }, { width: '10%', title: "每权重天数" }]
		}
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	// 组件方法
	methods: {
		init (data, typeValue) {
			if (typeValue === "非全院") {
				this.formParameter = [{ width: '8%', title: "月份" }, { width: '5%', title: "病例数" }, { width: '12%', title: "总结余(万元)" }, { width: '10%', title: "例均结余" }, { width: '10%', title: "次均费用" }, { width: '10%', title: "平均点值" }, { width: '10%', title: "平均点数" }, { width: '6%', title: "CMI" }, { width: '10%', title: "平均住院天数" }, { width: '11%', title: "每100点次均费用" }, { width: '11%', title: "每100点住院天数" }]
			} else {
				this.formParameter = [{ width: '8%', title: "月份" }, { width: '5%', title: "病例数" }, { width: '12%', title: "总结余(万元)" }, { width: '10%', title: "例均结余" }, { width: '10%', title: "次均费用" }, { width: '13%', title: "平均点值" }, { width: '10%', title: "CMI" }, { width: '10%', title: "平均住院天数" }, { width: '14%', title: "每权重费用" }, { width: '11%', title: "每权重天数" }]
			}
			let data_list = data.data_list;
			this.echartsInit(data_list);
			//内容
			this.cardData(data.desc);
		},
		// 图表
		echartsInit (data_list) {
			this.data_list = data_list;
			let myChart = echarts.init(this.$refs.pageTitle22EchartsRefs);
			let option;
			option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				legend: {
					data: ['总结余(万元)'],
					textStyle: {
						fontSize: 18
					},
					itemStyle: {
						color: '#428df7'
					}
				},
				xAxis: [
					{
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						axisLabel: {
							fontSize: 18,
							formatter: function (value) {
								var maxLength = 10; // 每行显示的最大字符数
								var result = '';
								for (var i = 0; i < value.length; i++) {
									result += value[i];
									if ((i + 1) % maxLength === 0) {
										result += '\n'; // 每maxLength字符换行
									}
								}
								return result;
							}
						},
						// prettier-ignore
						data: []
					}
				],
				yAxis: [
					{
						type: 'value',
						name: '总结余(万元)',
						position: 'left',
						alignTicks: true,
						axisLine: {
							fontSize: 18,
							show: true,
						},
						nameTextStyle: {
							fontSize: 18,
						}
					}
				],
				series: [
					{
						name: '总结余(万元)',
						type: 'bar',
						yAxisIndex: 0,
						barMaxWidth: 50,
						data: [],
						itemStyle: {
							color: function (params) {
								// 判断数据值是正数还是负数
								if (params.value >= 0) {
									return {
										type: 'linear',
										colorStops: [{
											offset: 0, color: ' #01cafe' // 开始颜色
										}, {
											offset: 1, color: '#106bf3' // 结束颜色
										}],
									}; // 正数的颜色为红色
								} else {
									return {
										type: 'linear',
										colorStops: [{
											offset: 0, color: '#ec442a' // 开始颜色
										}, {
											offset: 1, color: '#ee8296' // 结束颜色
										}],
									}; // 负数的颜色为绿色
								}

							}
						},
						label: {
							position: 'top',
							show: true,
							color: '#000',
							fontSize: 18,
							formatter: "{c}万"
						}
					},
				]
			};
			data_list.forEach((item, index) => {
				option.xAxis[0].data.push(item["月份"]);
				option.series[0].data.push(item['总结余(万元)']);
			})
			option && myChart.setOption(option);
		},
		//卡片内容
		cardData (desc) {
			this.card1 = {
				text1: desc["结余金额(万元)"],
				text1_1: desc["同期结余金额(万元)"],
				text2: desc["病例数(例)"],
				text2_2: desc["同期病例数(例)"],
				text3: desc["例均结余(元)"],
				text3_3: desc["同期例均结余(元)"],
				text4: desc["占比(%)"],
				text4_4: desc["同期占比(%)"],
			}
		}
	},
	created () {
	},
	mounted () {
	},
}
</script>

<style lang="less" scoped>
	.page-tile-22 {
		position: relative;
		height: 100%;
		.page-tile-22-top {
			height: 60%;
		}
		.page-tile-22-bottom {
			height: 40%;
		}

		.num-data-box {
			display: flex;
			align-items: center;
			position: absolute;
			top: -12vh;
			right: 0;
			height: 10vh;
			font-size: 1.2rem;
			.num-data {
				margin-right: 30px;
				display: flex;
				flex-direction: column;
				.tong-num-data {
					margin-bottom: 5px;
					display: flex;
					align-items: center;
				}
				.ben-num-data {
					display: flex;
					align-items: center;
				}
				.num-data-top {
					font-size: 1.5rem;
				}
				.num-data-bottom {
					margin-right: 15px;
				}
			}
		}
	}
</style>
